<template>
  <div class="box">
        <div class='app-container' :style="[{marginBottom: '-30px'}]">
  <el-form ref="form" label-width="80px">
 
 <el-form-item :style="[{marginLeft: '1000px'}]">
    <el-button type="primary" @click="tianjia">添加菜单</el-button>
  </el-form-item>


  </el-form>       
   </div>

     <!-- <el-card> -->
    <!-- <el-table style="width: 100%" >

      <el-table-column
        label="标题"
        prop="title"
        >
      </el-table-column>
     
       <el-table-column
        prop="code"
        label="权限点代码"
       >
        </el-table-column>
    
      <el-table-column  
        label="操作"
        >
        <template #default='{row}'>
          <el-button type="text" @click="xiugai(row)">修改</el-button>
          <el-button type="text" @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
      
    </el-table> -->


   <!-- 11111111111111111111111111111 -->
  <!-- <div slot="header">
     <treeTools
     :is-root="false"
      :data="company"
     />
    </div> -->

  <!-- <el-tree
  class="filter-tree"
  :data="departs"
  :props="defaultProps"
  default-expand-all
  :filter-node-method="filterNode"
  ref="tree">
        <template #default='{data}'>
          <treeTools :data="data" @openDialog = 'openDialogfn' @refreshList="departs" />
          </template>
</el-tree> -->

    <!-- 22222222222222222222222 -->
      <div :style="{margin: '10px'}">
    <el-alert
    title=""
    type="info"
    close-text = ' '
    > 
     <span :style="[{fontSize: '18px'}]">标题</span>
      <span :style="[{fontSize: '18px'},{marginLeft: '650px'}]">权限点代码</span>
       <span :style="[{fontSize: '18px'},{marginLeft: '300px'}]">操作</span>
    </el-alert>
    </div>

    <el-tree :data="departs" :props="defaultProps" :default-expand-all="true"
    :expand-on-click-node='false'>
          <el-row slot-scope="{ data }" type="flex" justify="space-between" align="middle" style="width: 100%">
            <el-col :style="[{fontSize: '18px'}]">
              <span>{{ data.title }}</span>
            </el-col>
            <el-col >
              <el-row type="flex" justify="end">
                <el-col :style="[{fontSize: '18px'},{marginLeft: '100px'}]">{{ data.code }}</el-col>

                <el-col :style="[{fontSize: '18px'},{marginLeft: '250px'}]">               
                    <el-button type="text" @click="xiugai(data)">修改</el-button>
                    <el-button type="text" @click="del(data.id)">删除</el-button>   
                </el-col>

                
              </el-row>

            </el-col>
          </el-row>       
</el-tree>

          <users ref='users'></users>

      <!-- <div :style="{marginLeft: '750px'}">
         <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="+pagesize"
      layout="prev, pager, next,sizes, total,jumper"
      :total="+counts">
    </el-pagination>
   </div> -->
   
  </div>
</template>

<script>
import { list , remove } from '../../api/base/menus'
 import users from '../components/menAdd.vue'
 import {tranListToTreeData} from '../../utils/index'

 import treeTools from '../components/tree-men.vue'
export default {
  components:{
    users,
    treeTools
  },

  data () {
    return {
        list1:[],
 
         defaultProps: {
        label: 'title',
        children: 'childs',
        
      },
       departs: [],

      props:{
        label:'title',// 指明 具体某一个字段的值 作为label展示
        children: 'childs',
      },
      
      company:{},
      visible: false,
      currentNode:''
    }
  },
   watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },

  created () {
    this.list()
  },

  methods: {
  //  用户列表
      async list(){
      const res =  await list({page:`1`,pagesize:'10'})
        console.log(res.data,'用户列表')
      // console.log(res.data[0].pid === null )
      // console.log(res.data)
      this.departs = res.data
      this.$refs.users.notPointDataList = this.departs
      // console.log(this.departs);
      // this.departs = tranListToTreeData(res.data,null)  
      // console.log(this.departs)
      //  this.company = {name:res.title,manager: res.code || '负责人', id:''}
      //  console.log(this.company)
        
        // console.log(res);
        // //  console.log(res,'用户列表');
        //  this.list1 = res.data
        //  console.log(this.list1);

      },
 
    //  添加菜单
      async tianjia(){
        this.$refs.users.dialogFormVisible = true
      },

      xiugai(row){
        this.$refs.users.dialogFormVisible = true
        console.log(row)
         this.$refs.users.formMenu = {...row}
         console.log(row)
        //  console.log(row.id);
      },  
 
      // 删除
      async del(id){
          console.log(id)
      await this.$confirm('您确定删除该员工吗', '提示', {
      type: 'warning'
    })
    await remove({id})
    this.$message.success('删除成功')
    this.list()
      },


      openDialogfn(data,type){
          
          this.visible = true
          // data ===> 当前正在操作的节点

          // 同部门下不允许重复  传递id
          this.currentNode = data
          // console.log(this.currentNode.id);
          // 在·add-dept·组件里查找更合适·===>·查找当前部门的所有子部门
           if(type === 'edit'){
            this.$refs.addDept.formData = {...data}
           }
        },

        filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      }
  }
}
</script>

<style scoped lang='less'>
 .box{
      background-color: #fff;
      margin: 10px;
   }

</style>
